<script type="text/javascript"
	src="<?=$this->baseUrl();?>/js/divCollapser.js"></script>

<script type="text/javascript">
  dojo.require("dijit.form.Button");
  dojo.require("dojo.data.ItemFileReadStore");
  dojo.require("dojo.parser");
  dojo.require("dojo.fx");
  
  //Datastores
  var dungeonStore = new dojo.data.ItemFileReadStore({url:"<?=$this->url(array('controller'=>'raids', 'action'=>'getdungeons'))?>"});  
  
  var animDiv = new divCollapser();
  
  var toggleDiv = function(menuDivId,subDivId,collapsLabel,noCollapsLabel)
  {
  	animDiv.toggle(subDivId);
  	if (animDiv.isCollapsed(subDivId)) dojo.byId(menuDivId).innerHTML = collapsLabel;
  	else dojo.byId(menuDivId).innerHTML = noCollapsLabel;
  };
  
  var selectDungeon = function(dungeonId,select)
  {
  	var div = dojo.byId("dungeon:"+dungeonId);
  	dojo.attr(div,"selected",select);
  	updateSelected(); 
  };
  
  
  
  var updateSelected = function()
  {   	
  	var selectedDiv = dojo.byId("raids_selected");
  	selectedDiv.innerHTML = "";
  	var somethingFound = "false";
  	for (var j = 2; j >= 0; j--){
  	  	var dungeons = dojo.byId("expansion:"+j).childNodes;
	  	for (var i = 0; i < dungeons.length; i++){  		
	  		if (dojo.attr(dungeons[i],"selected") == "true"){
	  			somethingFound = "true";
	  			var dungeonDiv = document.createElement("div");
	  			dojo.attr(dungeonDiv,"dungeonId",dojo.attr(dungeons[i],"dungeonId"));
	  			dojo.attr(dungeonDiv,"dungeonName",dojo.attr(dungeons[i],"dungeonName"));
	  			dungeonDiv.innerHTML = " - "+dojo.attr(dungeons[i],"dungeonName");
	  			dojo.attr(dungeonDiv,"onClick","selectDungeon(\""+dojo.attr(dungeons[i],'dungeonId')+"\",\"false\");");  			
	  		
	  			
	  			dojo.byId("raids_selected").appendChild(dungeonDiv);	  			
	  			//alert("dungeon: "+dungeons[i].id);
	  		}
	  		//alert("dungeon: "+dungeons[i].id);
	  	}
  	}
  	if (somethingFound == "false") selectedDiv.innerHTML = "";
  };

  
  var setClassName = function(divId,className)
  {
  	dojo.byId(divId).className = className;
  };
  
  var addDungeonDiv = function(dungeonId,expansion,dungeonName)
  {
  	//Creating a new div
  	var div = document.createElement("div");
  	
  	//Setting all attributes
  	dojo.attr(div,"id","dungeon:"+dungeonId);
  	dojo.attr(div,"dungeonId",dungeonId);
  	dojo.attr(div,"class","dungeon:not_marked");  	
  	dojo.attr(div,"style","clear: both");
  	dojo.attr(div,"selected","false");
  	dojo.attr(div,"dungeonName",dungeonName);
  	dojo.attr(div,"onClick","selectDungeon("+dungeonId+",\"true\");");

  	div.innerHTML = " - "+dungeonName;
  	
  	//Appending the div
  	dojo.byId("expansion:"+expansion).appendChild(div);
  	
  };  
  
  var addDungeonsToDiv = function(items, request){
  	for (var i = 0; i < items.length; i++){
  		var item = items[i];
  		
  		addDungeonDiv(	dungeonStore.getIdentity(item),
  						dungeonStore.getValue(item,"expansion"),
  						dungeonStore.getLabel(item)	);
  	}
  };
  
  var createRaid = function(){
	var result = new Object();
	var raids = dojo.byId("raids_selected").childNodes;
	if (raids.length > 0) {
		
  		for (var i = 0; i < raids.length; i++){

			result[dojo.attr(raids[i],"dungeonId")] = dojo.attr(raids[i],"dungeonName");
  		}
  		
  		document.create_raid.dungeons.value = dojo.toJson(result);
  		//alert(document.create_raid.dungeons.value);
	}
  };

  var debugAlert = function(){
	alert(""+document.create_raid.start_time.value);
  };
  
  
  var initDND = function()
  {
  	toggleDiv('wotlk','expansion:2','<b>(+) WotLK </b>','<b>(-) WotLK</b>');
  	toggleDiv('tbc','expansion:1','<b>(+) TBC </b>','<b>(-) TBC</b>');
  	toggleDiv('classic','expansion:0','<b>(+) Classic </b>','<b>(-) Classic</b>')
  	dungeonStore.fetch({onComplete: addDungeonsToDiv}); 
  	//alert(dojo.byId("expansion:1").innerHTML); 	
  };  

  
  
  dojo.addOnLoad(initDND);
  
</script>

<form name="create_raid" action="<?= $this->route("raids", "create") ?>" onsubmit="createRaid();" method="post">

<h1>Select Raid Time:</h1>

<table class="shaded">
	<tr>
		<td><?php echo $this->form->getElement('start_date'); ?></td>
		<td><?php echo $this->form->getElement('start_time'); ?></td>
	</tr>
	<tr>
		<td><?php echo $this->form->getElement('signup_date'); ?></td>
		<td><?php echo $this->form->getElement('signup_time'); ?></td>
	</tr>
	<tr>
		<td><?php echo $this->form->getElement('finish_date'); ?></td>
		<td><?php echo $this->form->getElement('finish_time'); ?></td>
	</tr>
</table>

<h1>Select Dungeons/Raids:</h1>

<table class="shaded">
	<tr>
		<td>

		<div id="wotlk" class="box"
			onClick="toggleDiv('wotlk','expansion:2','<b>(+) WotLK </b>','<b>(-) WotLK</b>');">
		<b>WotLK</b></div>
		<div id="expansion:2" class="box"></div>

		<br>

		<div id="tbc" class="box"
			onClick="toggleDiv('tbc','expansion:1','<b>(+) TBC </b>','<b>(-) TBC</b>');">
		<b>TBC</b></div>

		<div id="expansion:1" class="box"></div>

		<br>

		<div id="classic" class="box"
			onClick="toggleDiv('classic','expansion:0','<b>(+) Classic </b>','<b>(-) Classic</b>');">
		<b>Classic</b></div>

		<div id="expansion:0" class="box"></div>

		</td>

		<td>

		<div id="raids_selected_menu" class="box"><b>Raids Selected</b></div>
		<div id="raids_selected" class="box"></div>

		</td>
	</tr>
</table>

<h1>Select Raid Leader:</h1>

<?php echo $this->form->getElement('raid_leader'); ?>

<h1>Select Raider Rank:</h1>
<?php echo $this->form->getElement('rank'); ?>


<h1>Set Note (optional):</h1>
<?php echo $this->form->getElement('note'); ?>

<h1>Create Raid:</h1>

<div id="hat" name="benny">
<input type="hidden" name="dungeons" value="none" />
<input type="submit" name="confirm" value="Create Raid" />
</div>
</form>

